<template>
  <zk-topBg
    showStash
    paddingTop="30"
    :showBack="true"
    title="入库审批"></zk-topBg>
  <view id="ApprovalManagement">
    <view class="search_box flex">
      <zk-selectBox
        v-model:modelValue="PutStatus"
        value="DictCode"
        label="DictName"
        peaseSelect="入库状态"
        :options="APputstore.putStatusList.StatusList">
      </zk-selectBox>
      <zk-selectBox
        v-model:modelValue="PutType"
        value="DictCode"
        label="DictName"
        peaseSelect="入库类型"
        :options="APputstore.putTypeList.TypeList">
      </zk-selectBox>
      <view class="date_box">
        <zk-date v-model:date="date"></zk-date>
      </view>
      <view class="ipt_box">
        <zk-input clearable v-model:value="searchParam"></zk-input>
      </view>
      <zk-btn iconType="search" @click="search">查询</zk-btn>
    </view>
    <view class="table_box">
      <!-- 头部 -->
      <view class="table_header">
        <view class="table_header_item">
          <!-- 表头 -->
          <view
            class="color_text_gray fs_14"
            v-for="(item, index) in APputstore.APput_tableHeader"
            :key="index">
            {{ item }}
          </view>
        </view>
      </view>
      <!-- 表格 -->
      <scroll-view scroll-y>
        <view class="table_body">
          <view
            v-for="(item, index) in APputstore.APput_list.Putlist"
            :key="index"
            class="table_body_item">
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 text_overflow">
                {{ item.PutCode }}
              </view>
            </view>
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 text_overflow">
                {{ item.PutTypeName }}
              </view>
            </view>
            <!-- 入库时间 -->
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 text_overflow">
                {{ item.PutTime }}
              </view>
            </view>
            <!-- 入库状态 -->
            <view class="table_body_item_cell text_overflow">
              <view
                :class="[
                  item.PutStatus == 'PutEdit' ? 'color_yellow' : 'color_green',
                ]"
                class="fs_14 text_overflow">
                {{ item.PutStatus == "PutEdit" ? "编辑中" : "已提交" }}
              </view>
            </view>
            <!-- 操作人 -->
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 text_overflow">
                {{ item.OperatorName }}
              </view>
            </view>
            <!-- 审批状态 -->
            <view class="table_body_item_cell text_overflow">
              <view
                :class="[color(item.ReplyStatus)]"
                class="fs_14 text_overflow">
                {{
                  item.ReplyStatus == "CheckPass"
                    ? "审核通过"
                    : item.ReplyStatus == "CheckNot"
                    ? "待审核"
                    : item.ReplyStatus == "CheckFail"
                    ? "未通过"
                    : "未提交"
                }}
              </view>
            </view>
            <!-- 审批人 -->
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 text_overflow">
                {{ item.ReplyerName }}
              </view>
            </view>
            <!-- 审批时间 -->
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 text_overflow">
                {{ item.ReplyTime }}
              </view>
            </view>
            <!-- 操作 -->
            <view class="table_body_item_cell text_overflow">
              <view class="fs_14 flex handle_Box color_green">
                <view
                  v-if="item.ReplyStatus == 'CheckNot'"
                  @tap="editPutOrder(item)">
                  编辑
                </view>
                <view v-else @tap="goDetail(item)">详情</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="pagination">
        <zk-pagination
          :total="APputstore.totalCount"
          @event-change="handlePageChange">
        </zk-pagination>
      </view>
      <zk-tips></zk-tips>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useAPputStore } from "@/stores/modules/ApprovalManagement/APput/APput";
import { onShow } from "@dcloudio/uni-app";
import { useToastStore } from "@/stores/modules/toast";
const toastStore = useToastStore();
const APputstore = useAPputStore();
onShow(() => {
  APputstore.getListPutPage({});
  APputstore.getDictList();
  APputstore.getPutTypeList();
});
const errMsg = ref("");
const color = computed(() => (str: any) => {
  return str == "CheckPass"
    ? "color_green"
    : str == "CheckNot"
    ? "color_yellow"
    : str == "CheckFail"
    ? "color_red"
    : "color_blue";
});
// 入库状态
const PutStatus = ref("");
// 入库类型
const PutType = ref("");
// 日期
const date = ref("");
// 搜索条件
const searchParam = ref("");
// 列表分页
const handlePageChange = async (data: any) => {
  console.log("分页", data);
  await APputstore.getListPutPage({
    pageNum: data.pageNum || 1,
    pageSize: data.pageSize || 10,
    searchParam: data.searchParam || "",
    StartDate: data.StartDate || "",
    EndDate: data.EndDate || "",
    PutStatus: data.PutStatus || "",
    PutType: data.PutType || "",
  });
};
//查询
const search = async () => {
  let StartDate = "";
  let EndDate = "";
  if (date.value != "" && date.value.length > 1) {
    StartDate = date.value[0];
    EndDate = date.value[1];
    console.log("日期", StartDate, EndDate);
  } else {
    StartDate = "";
    EndDate = "";
  }
  await handlePageChange({
    searchParam: searchParam.value || "",
    StartDate: StartDate || "",
    EndDate: EndDate || "",
    PutStatus: PutStatus.value || "",
    PutType: PutType.value || "",
  });
};
//清空搜索条件
const clearSearch = () => {
  searchParam.value = "";
  date.value = "";
  PutStatus.value = "";
  PutType.value = "";
};

// 详情
const goDetail = (item: any) => {
  uni.navigateTo({
    url: `/pages/ApprovalManagement/APput/handleAPput/handleAPput?PutCode=${item.PutCode}`,
  });
};
// 编辑
const editPutOrder = (item: any) => {
  uni.navigateTo({
    url: `/pages/ApprovalManagement/APput/handleAPput/handleAPput?PutCode=${item.PutCode}&Edit='edit'`,
  });
};
</script>

<style lang="scss" scoped>
#ApprovalManagement {
  position: relative;
  height: calc(552px - 64px);
  width: 98%;
  margin: auto;
  padding: 0 10px;
  border-radius: 10px;
  background: rgb(255, 255, 255);
  z-index: 0;
  margin-top: 10px;
  padding: 10px;
  ::v-deep .optionsList .option {
    padding: 5px 10px;
  }
  .search_box {
    width: 80%;
    justify-content: space-between;
    .date_box {
      width: 216px;
    }
    .ipt_box {
      width: 120px;
    }
  }
  .table_box {
    padding: 16px 0 0 0;
    width: 100%;
    height: calc(100% - 40px);
    scroll-view {
      height: calc(100% - 76px);
      .table_body {
        width: 100%;
        height: 100%;
        .table_body_item {
          border-bottom: 1px solid rgb(244, 244, 244);
        }
        .table_body_item_cell {
          .handle_Box {
            justify-content: center;
            width: 100%;
            view {
              margin: 0 5px;
            }
          }
        }
      }
    }
    .table_header_item,
    .table_body_item {
      text-align: center;
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: 40px;
      align-items: center;
      padding: 0 10px;
    }
    .table_header_item {
      width: 100%;
      border-radius: 6px;
      background: #f2f3f4;
      .title {
        color: #adafb8;
        font-family: HarmonyOS Sans SC;
        font-size: 14px;
        text-align: center;
      }
    }
  }
}
</style>
